<template>
  <div class="login-container">
    <el-form
      :model="ruleForm2"
      :rules="rules2"
      status-icon
      ref="ruleForm2"
      label-position="left"
      label-width="0px"
      class="demo-ruleForm login-page"
    >
      <h3 class="title">
        <img
              style="
                border-radius: 50%;
                width: 50px;
                height: 50px;
                margin-top: -3px;
                vertical-align: middle;
              "
              src="../assets/img/123.jpg"
            />
            <span
              style="
                font-size: 20px;
                letter-spacing: 3px;
                font-weight: 400;
              "
              >德召文卡修系统</span
            >
      </h3>
      <el-form-item prop="zh">
        <el-input
          type="text"
          v-model="ruleForm2.zh"
          auto-complete="off"
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="mm">
        <el-input
          type="password"
          v-model="ruleForm2.mm"
          auto-complete="off"
          placeholder="密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" class="rememberme">记住密码</el-checkbox>
      <el-form-item style="width: 100%">
        <el-button
          type="primary"
          style="width: 100%"
          @click="login"
          :loading="logining"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    //这里存放数据
    return {
      logining: false,
      ruleForm2: {
        zh:"",
        mm:""
      },
      rules2: {
        zh: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        mm: [
          { required: true, message: "密码为空", trigger: "blur" },
        ],
      },
      checked: false,
    };
  },
  //计算属性
  computed: {},
  //方法集合
  methods: {
    login() {
      let _this = this;
      this.$http
        .get(
          'http://127.0.0.1:8080/api/emp/login',{
            params: {
              zh: this.ruleForm2.zh,
              mm: this.ruleForm2.mm
            },
        })
        .then(function (resp) {
          if (resp.data.code == "200") {
            if (resp.data.emp.dimissionid == 0) {
              _this.$store.commit("setUser", resp.data.emp);
              _this.$router.push("/index");
            } else {
              _this.$alert("账号已被冻结", "系统提示");
            }
          } else {
            _this.$alert("用户名或密码错误", "系统提示");
          }
        });
    },
  },
  //挂载完成（可以访问DOM元素）
  mounted() {},
  //监控data中的数据变化
  watch: {},
};
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
.login-container {
  width: 100%;
  height: 100%;
}
.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}
</style>